<template>
  <div class="display-flex">
    <dept-tree class="margin-r-20" @getDeptDev="getDeptDev" @treeData="getTreeData"></dept-tree>
    <div class="flex-1 padding-20">
      <filter-bar>
        <template slot="left-bar">
          <a-space>
            <a-select
              class="_select"
              v-model="searchForm.equiType"
              @change="getDeptDev()">
              <a-select-option :key="item.key" v-for="item in typeArr">{{
                item.name
              }}</a-select-option>
            </a-select>
            <a-select
              class="_select"
              v-model="searchForm.equiStatus"
              @change="getDeptDev()">
              <a-select-option :key="item.key" v-for="item in statusArr">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-space>
        </template>
        <template slot="right-bar">
          <a-space>
            <a-button
              @click="set()"
              class="nbcs-btn nbcs-btn-primary"
            >预设画面</a-button>
            <a-button
              @click="edit(0)"
              class="nbcs-btn nbcs-btn-primary"
            >新增设备</a-button>
          </a-space>
        </template>
      </filter-bar>
      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="list"
        :pagination="pageConfig"
        rowKey="equipmentId"
        :loading="loading"
        :scroll="{ x: 600}"
      >
        <span slot="equiType" slot-scope="text, record">
          <span v-if="record.equiType == 1">V1</span>
          <span v-else-if="record.equiType == 3">V3</span>
          <span v-else-if="record.equiType == 4">V4</span>
        </span>
        <span slot="equiStatus" slot-scope="text, record">
          <a-tag v-if="record.equiStatus == 1" class="tag-blue">激活</a-tag>
          <a-tag v-else-if="record.equiStatus == 2" class="tag-red">未激活</a-tag>
          <a-tag v-else-if="record.equiStatus == 3" class="tag-green">在线</a-tag>
          <a-tag v-else-if="record.equiStatus == 4" class="tag-gray">离线</a-tag>
        </span>
        <template slot="preinstall" slot-scope="text">
            <img
              v-if="text"
              slot="cover"
              v-lazy="text"
              class="previewImg"
              @click="viewer(text)"
            />
            <span v-else>无</span>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="edit(1, record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除该设备吗？" @confirm="del(record.equipmentId,deptData.id)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a class="table-red-btn">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
      <!-- 图片 -->
      <div class="images" v-viewer="{ movable: false }" v-show="false">
        <img :src="viewUrl" />
      </div>
      <device-form ref="deviceForm" 
        :tenantId="deptData.id" 
        :deptId="deptData.deptId" 
        :treeData="treeData"
        @getList="getDeptDev"></device-form>
      <device-set ref="deviceSet" 
        :tenantId="deptData.id" 
        :deptId="deptData.deptId" 
        :treeData="treeData"
        @getList="getDeptDev"></device-set>
    </div>
  </div>
</template>
<script>
import filterBar from '@/layouts/FilterBar'
import deptTree from './deptTree.vue'
import {devList} from '@/services/tenant'
import { del } from "@/services/device";
import deviceForm from './deviceForm.vue'
import deviceSet from './deviceSet.vue'
export default {
  name: "device",
  components: {deptTree,filterBar,deviceForm,deviceSet},
  data() {
    return {
      searchForm:{
        equiType:'',
        equiStatus:''
      },
      typeArr:[
        {key:'',name:'设备型号（全部）'},
        {key:'1',name:'V1'},
        {key:'3',name:'V3'},
        {key:'4',name:'V4'},
      ],
      statusArr:[
        {key:'',name:'设备状态（全部）'},
        {key:'1',name:'激活'},
        {key:'2',name:'未激活'},
        {key:'3',name:'在线'},
        {key:'4',name:'离线'},
      ],
      columns: [
        { title: "#", dataIndex: "equipmentId",  },
        { title: "设备名称", dataIndex: "equiName",},
        { title: "设备型号", scopedSlots: { customRender: "equiType" } },
        { title: "设备类型", dataIndex:"typeName" },
        { title: "设备状态", scopedSlots: { customRender: "equiStatus" }},
        { title: "所属组织",dataIndex: "deptName"},
        { title: "设备地址",dataIndex: "equiAddress",customRender:(text,record)=>{
          return record.address || '' + text
        }},
        { 
          title: "预设画面",
          dataIndex: "preinstall",
          scopedSlots: { customRender: "preinstall" }
        },
        { title: "操作", 
          fixed: "right",
          width: 120,
          scopedSlots: { customRender: "action" }
        },
      ],
      list:[],
      loading:false,
      pageConfig:false,
      deptData:{},
      treeData:[],
      selectedRowKeys:[],
      viewUrl:''
    };
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys) => {
          this.selectedRowKeys = selectedRowKeys;
        },
      };
    },
  },
  created() {
  },
  mounted () {
  },
  methods: {
    getDeptDev(data){
      console.log(data);
      if(data){
        this.deptData = {
          id:data.id,
          deptId:data.deptId
        };
      }
      this.loading = true;
      devList(Object.assign(this.deptData,this.searchForm)).then(({data}) => {
        this.loading = false;
        if(data.code == 0){
          this.list = data.data;
        }
      })
    },
    edit(action, data = {}){
      this.$refs['deviceForm'].changeForm(true,action,data);
    },
    set(){
      if(this.selectedRowKeys.length > 0){
        this.$refs['deviceSet'].changeForm(true,this.selectedRowKeys);
      } else{
        this.$message.warning('请选择设备');
      }
    },
    getTreeData(data){data
      this.treeData = data;
    },
    del(id,tenantId){
      del({
        equipmentId:id,
        tenantId:tenantId
      }).then(({data}) => {
        if(data.code == 0){
          this.$message.success("删除成功");
          this.getDeptDev();
        }
      })
    },
    viewer(url){
      this.viewUrl = url;
      const viewer = document.querySelector(".images").$viewer;
      console.log(viewer);
      viewer.show();
    }
  },
};
</script>

<style lang="less" scoped>
// .filter-bar{
//   background-color: #f3f2f7 !important;
// }
._select{
  width: 180px;
}
.previewImg {
  width: 120px;
  height: 66px;
  object-fit: cover;
  cursor: pointer;
}
</style>
